<template>
  <div style="height:100%">
    <el-container>
      <el-header>
        <div class="top-bar">
          <el-dropdown size="mini" @command="handleCommand" split-button type="primary" class="user-styl">
            {{userId}}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="header-right">
        </div>
      </el-header>
      <el-container>
        <el-aside class="nav_box">
          <el-menu default-active="1" class="el-menu-vertical-demo menu" @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1" @click="toPage('首页')">首页</el-menu-item>
            <router-link to="/per-manager">
            <el-menu-item v-if="permissions=='1'" index="2" @click="toPage('权限管理')">权限管理</el-menu-item>
            </router-link>
            <router-link  v-if="permissions=='1'||permissions=='2'" to="/user">
            <el-menu-item index="3" @click="toPage('用户管理')">用户管理</el-menu-item>
            </router-link>
            <router-link to="/dorm-manager">
            <el-menu-item index="4" v-if="permissions=='1'" @click="toPage('公寓管理')">公寓管理</el-menu-item>
            </router-link>
            <router-link to="/violation">
            <el-menu-item index="5" @click="toPage('违纪管理')">违纪管理</el-menu-item>
            </router-link>
            <!-- <router-link to="/leave-manager">
            <el-menu-item index="6" @click="toPage('请假管理')">请假管理</el-menu-item>
            </router-link> -->
            <router-link to="/data-Summary" v-if="permissions=='1'">
            <el-menu-item index="7" @click="toPage('数据汇总')">数据汇总</el-menu-item>
            </router-link>
          </el-menu>
        </el-aside>
        <el-main id="elmain">
          <transition>
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { removeToken, getUserName,getPermissions} from "@/utils/auth";
import layoutHeader from "@/views/home/header/Header";
import Bottom from "@/views/home/footer/Bottom";
import Nav from "@/views/home/nav-bar/nav"
export default {
  name: "home",
  components: {
    layoutHeader,
    Bottom,
    Nav
  },
  data() {
    return {
      openValue: true,
      value: "",
      selected: "",
      activeIndex: "",
      activeIndex2: "",
      userId: "",
      activeIndex: "",
      activeIndex2: "",
      userName: "",
      permissions:""
    };
  },
  mounted() {
    // this.userId = getUserId();
    this.userId = getUserName();
    console.log(getUserName());
     this.getRole()

  },
  methods: {
   handleSelect(key, keyPath) {
      //   console.log(key, keyPath);
    },
    handleCommand(command) {
      if (command === "logout") {
        removeToken();
        this.$router.push("/");
      }
    },
    getRole(){
      this.permissions=getPermissions()
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toPage(item) {
      if (item === "首页") {
        this.$router.push("/hello");
      } else if (item === "用户管理") {
        this.$router.push('/user')
      } else if (item === "公寓管理") {
        this.$router.push('/dorm-manager')
      }  else if (item === "违纪管理") {
        this.$router.push('/violation')
      } 
      
      /* else if (item === "数据汇总") {
        this.$router.push('/data-Summary')
      } */else if (item === "权限管理") {
        this.$router.push('/per-manager')
      }/* else if (item === "类型管理") {
        this.$router.push('/articleType')
      } */
    }
  }
};

</script>
<style  Lang="less" scoped>
.box{
  width: 100%;
}
.el-container {
  height: 100%;
}
.top-bar{
   height: 40px;
  position: absolute;
  width: 100%;
  z-index: 9;
}
.user-styl {
  position: absolute;
  right:2%;
  top: 6px;
}
.el-header {
  background-color: #2c3e50;
  color: #b3c0d1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "宋体";
  font-weight: bolder;
  font-size: 20px;
}
 .header-left {
    display: flex;
    align-items: center;
  }
.header-right .el-dropdown > img {
      width: 45px;
      height: 45px;
      border: 2px solid #eeeeee;
      border-radius: 50%;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-top: 5px;
      margin-right: -2px;
    }
.el-aside {
  background-color: #545c64;
}
.nav_box{
  width: 200px!important;
}
.el-menu {
    border-right: none;
  }
.el-main {
  background-color: #e9eef3;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.menu {
  width:200px;
  height: 91%;
  position: absolute;
  background: #f0f2f5;
  margin-top: 10px;

}
</style>
